<!DOCTYPE html>
    <html lang="en">

<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
</head>

<body>
    <div id="box">
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../image/1.png" /></div>
                    <div class="swiper-slide"><img src="../image/3.png" /></div>
                    <div class="swiper-slide"><img src="../image/5.png" /></div>
                    <div class="swiper-slide"><img src="../image/6.png" /></div>

                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>

            </div>

            <div class="banner1">
                <div class="banner1box1"><img src="../image/2.png" /></div>
                <div class="banner1box2"><a href="#">首页</a></div>
                <div class="banner1box2"><a href="../department/department.html">部门概况</a></div>
                <div class="banner1box2"><a href="">师资队伍</a></div>
                <div class="banner1box2"><a href="">思政建设</a></div>
                <div class="banner1box2"><a href="">红馆</a></div>
                <div class="banner1box2"><a href="">心理健康教育中心</a></div>
                <div class="banner1box2"><a href="">教学科研</a></div>
                <div class="banner1box2"><a href="">学生社团</a></div>
                <div class="banner1box3">
                    <input type="text" placeholder="请输入关键词搜索">
                    <img class="sousuo" src="../image/sousuo.png" />
                </div>

            </div>

        </div>

        <div class="new">

            <div class="newtitle">
                <div class="newtitle1">XIN WEN GONG GAO</div>
                <div class="newtitle2">新闻公告</div>

            </div>
            <div class="nwecenter">
                <div class="nwecenter1">
                    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
                        class="swiper mySwiper1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="title" data-swiper-parallax="-300"><img src="../image/3.png" /></div>
                                <div class="text" data-swiper-parallax="-100">
                                    <div class="text1">“为。育人 为国育才” —9位大教师倾情讲述育人故事</div>
                                    <div class="text2">
                                        <div class="text2-left"></div>
                                        <div class="text2-right">2024-05-09</div>

                                    </div>
                                    <div class="text3">
                                        三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，
                                        是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，
                                        是一幅字、一块匾，是心照不宣的默契......

                                    </div>
                                    <div class="text4">
                                        <div class="text4-1">
                                            <div class="text4-1-left"><i class="left"></i></div>
                                            <div class="text4-1-right"><i class="right"></i></div>
                                        </div>
                                        <div class="text4-2"><text style="color: #c90000;font-size: 26px;">1</text>/3
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="title" data-swiper-parallax="-300"><img src="../image/5.png" /></div>
                                <div class="text" data-swiper-parallax="-100">
                                    <div class="text1">“为。育人 为国育才” ——9位大教师倾情讲述育人故事</div>
                                    <div class="text2">
                                        <div class="text2-left"></div>
                                        <div class="text2-right">2024-05-09</div>
                                    </div>
                                    <div class="text3">
                                        三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，
                                        是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，
                                        是一幅字、一块匾，是心照不宣的默契......
                                    </div>
                                    <div class="text4">
                                        <div class="text4-1">
                                            <div class="text4-1-left"><i class="left"></i></div>
                                            <div class="text4-1-right"><i class="right"></i></div>
                                        </div>
                                        <div class="text4-2"><text style="color: #c90000;font-size: 26px;">2</text>/3
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="title" data-swiper-parallax="-300"><img src="../image/6.png" /></div>
                                <div class="text" data-swiper-parallax="-100">
                                    <div class="text1">“为。育人 为国育才” ——9位大教师倾情讲述育人故事</div>
                                    <div class="text2">
                                        <div class="text2-left"></div>
                                        <div class="text2-right">2024-05-09</div>
                                    </div>
                                    <div class="text3">
                                        三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，
                                        是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，
                                        是一幅字、一块匾，是心照不宣的默契......
                                    </div>
                                    <div class="text4">
                                        <div class="text4-1">
                                            <div class="text4-1-left"><i class="left"></i></div>
                                            <div class="text4-1-right"><i class="right"></i></div>
                                        </div>
                                        <div class="text4-2"><text style="color: #c90000;font-size: 26px;">3</text>/3
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>

                    </div>
                </div>
                <div class="nwecenter2"></div>
            </div>

            <div class="newbox">
                <div class="newbox1">
                    <div class="newbox1-1">"为。育人 为国育才9位法大教师倾情讲述育</div>
                    <div class="newbox1-2">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字- 块匾，是心照不宣的默契三尺讲台育英才...</div>
                    <div class="newbox1-3">2022-11-02</div>
                </div>
                <div class="newbox1">
                    <div class="newbox1-1">"为。育人 为国育才9位法大教师倾情讲述育</div>
                    <div class="newbox1-2">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字- 块匾，是心照不宣的默契三尺讲台育英才...</div>
                    <div class="newbox1-3">2022-11-02</div>
                </div>
                <div class="newbox1">
                    <div class="newbox1-1">"为。育人 为国育才9位法大教师倾情讲述育</div>
                    <div class="newbox1-2">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字- 块匾，是心照不宣的默契三尺讲台育英才...</div>
                    <div class="newbox1-3">2022-11-02</div>
                </div>
            </div>
            <div class="ccc"> </div>
            <div class="newbottom">
                查看更多
                <img src="../image/4.png" alt="">
            </div>
        </div>

        <div class="box1">
            <div class="box1title">
                <div class="box1title1">DANG JIAN YIN LING</div>
                <div class="box1title2">。建引领</div>
            </div>
            <div class="box1center">
                <div class="box1center1">
                    <img src="../image/5.png" alt="">
                    <div class="box1center1-1">
                        <div class="box1center1-2">
                            <text style="font-size: 18px;">02</text><br />
                            2022-11
                        </div>
                        <div class="box1center1-3">关于举办第二届(2022年)烟台市乡村面艺
                            关于举办第二届(2022年)烟台市乡村面艺...
                        </div>
                    </div>
                    <div class="box1center1-4"> </div>
                </div>
                <div class="box1center1">
                    <img src="../image/5.png" alt="">
                    <div class="box1center1-1">
                        <div class="box1center1-2">
                            <text style="font-size: 18px;">02</text><br />
                            2022-11
                        </div>
                        <div class="box1center1-3">关于举办第二届(2022年)烟台市乡村面艺
                            关于举办第二届(2022年)烟台市乡村面艺...
                        </div>
                    </div>
                    <div class="box1center1-4"> </div>
                </div>
                <div class="box1center1">
                    <img src="../image/5.png" alt="">
                    <div class="box1center1-1">
                        <div class="box1center1-2">
                            <text style="font-size: 18px;">02</text><br />
                            2022-11
                        </div>
                        <div class="box1center1-3">关于举办第二届(2022年)烟台市乡村面艺
                            关于举办第二届(2022年)烟台市乡村面艺...
                        </div>
                    </div>
                    <div class="box1center1-4"> </div>
                </div>
            </div>
            <div class="box1bottom">
                查看更多
                <img src="../image/4.png" alt="">
            </div>
        </div>

        <div class="box2">
            <div class="box2title">
                <div class="box2title1">JIAO YAN DONG TAI</div>
                <div class="box2title2">教研动态</div>
            </div>
            <div class="box2center">
                <div class="box2center1"><img src="../image/6.png" alt=""></div>
                <div class="box2center2">
                    <ul>
                        <li>“为。育人 为国育才”<text style="float: right;">2022-11-2</text></li>
                        <li>“为。育人 为国育才”<text style="float: right;">2022-11-2</text></li>
                        <li>“为。育人 为国育才”<text style="float: right;">2022-11-2</text></li>
                        <li>“为。育人 为国育才”<text style="float: right;">2022-11-2</text></li>
                        <li>“为。育人 为国育才”<text style="float: right;">2022-11-2</text></li>
                    </ul>
                </div>
            </div>
            <div class="box2bottom">
                查看更多
                <img src="../image/4.png" alt="">
            </div>
        </div>

        <div class="box3">
            <div class="box3title">
                <div class="box3title1">SHE HUI FU WU</div>
                <div class="box3title2">社会服务</div>
            </div>
            <div class="box3center">
                <div class="box3center1">
                    <img src="../image/10.png" alt="">
                    <div class="box3center1-1">
                        <div class="box3center1-2">"为。育人 为国育才9位法大教师倾情讲述育</div>
                        <div class="box3center1-3">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字- 块匾，是心照不宣的默契三尺讲台育英才...</div>
                        <div class="box3center1-4"><img src="../image/11.png" alt="">2022-11-02</div>
                    </div>
                </div>
                <div class="box3center2">
                    <div class="box3center2-1">
                        <div class="box3centerimg"><img src="../image/8.png" alt=""></div>
                        <div>红馆</div>
                    </div>
                    <div class="box3center2-2">
                        <div class="box3centerimg"><img src="../image/9.png" alt=""></div>
                        <div>心理健康中心</div>
                    </div>
                </div>
            </div>
            <div class="box3bottom">
                查看更多
                <img src="../image/4.png" alt="">
            </div>
        </div>

        <div class="box4">
            <div class="box4title">
                <div class="box4title1">ZHU TI HUO DONG</div>
                <div class="box4title2">主题活动</div>
            </div>
            <div class="box4center">
                <div class="box4center1">
                    <div class="box4center1-1">
                        <img src="../image/12.png" alt="">
                        <div class="box4center1-1font">
                            山东城院“五心工程”<br />
                            温暖校园
                        </div>
                    </div>
                    <div class="box4center1-2">
                        3月24日，一场别开生面的平台通
                        过网络直播的形式拉开帷幕...
                    </div>
                </div>
                <div class="box4center1">
                    <div class="box4center1-1">
                        <img src="../image/12.png" alt="">
                        <div class="box4center1-1font">
                            山东城院“五心工程”<br />
                            温暖校园
                        </div>
                    </div>
                    <div class="box4center1-2">
                        3月24日，一场别开生面的平台通
                        过网络直播的形式拉开帷幕...
                    </div>
                </div>
                <div class="box4center1">
                    <div class="box4center1-1">
                        <img src="../image/12.png" alt="">
                        <div class="box4center1-1font">
                            山东城院“五心工程”<br />
                            温暖校园
                        </div>
                    </div>
                    <div class="box4center1-2">
                        3月24日，一场别开生面的平台通
                        过网络直播的形式拉开帷幕...
                    </div>
                </div>
                <div class="box4center1">
                    <div class="box4center1-1">
                        <img src="../image/12.png" alt="">
                        <div class="box4center1-1font">
                            山东城院“五心工程”<br />
                            温暖校园
                        </div>
                    </div>
                    <div class="box4center1-2">
                        3月24日，一场别开生面的平台通
                        过网络直播的形式拉开帷幕...
                    </div>
                </div>
            </div>
            <div class="box4bottom">
                查看更多
                <img src="../image/4.png" alt="">
            </div>
        </div>

        <div class="box5">
            <div class="box5title">
                <div class="box5title1">MA YUAN FENG CAI</div>
                <div class="box5title2">马院风采</div>
            </div>
            <div class="box5center">
                <div class="swiper mySwiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../image/jiang1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang5.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang6.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang7.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang8.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../image/jiang9.jpg" alt=""></div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>

            </div>
            <div class="box5bottom">
                <text class="box5bottom1">友情链接：</text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
                <text class="box5bottom2"><a href="#">山东教育局</a></text>
            </div>
        </div>

        <div class="foot">
            <div class="foottop">
                <div class="foot1">
                    <div class="foot1-1"><img src="../image/2.png" alt=""></div>
                    <div class="foot1-2">地址:&nbsp;&nbsp;&nbsp;&nbsp;
                        山东省烟台市高新区海天路1001号 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        办公室电话:&nbsp;&nbsp;&nbsp;&nbsp;0535-293876</div>
                    <div class="foot1-3"></div>
                </div>
            </div>
            <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
        </div>
    </div>

    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

    <script>
        var swiper = new Swiper(".mySwiper1", {
            speed: 600,
            parallax: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

    <script>
        var swiper = new Swiper(".mySwiper2", {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });
    </script>
</body>

</html>